<template>
<div id="manggerCenter">
  <el-container>
  <el-aside :width="isCollapse" class="wow bounceInLeft" data-wow-duration ="0.1s" data-wow-delay ="0s">
    <mangger-lefter :isCollapse="collapse"></mangger-lefter>
  </el-aside>
    <el-container>
      <el-header  class="wow bounceInDown  " data-wow-duration ="1s" data-wow-delay ="0s">
          <el-col :span="23"  class="wow bounceInUp" data-wow-duration ="1s" data-wow-delay ="0s">
              <el-menu  mode="horizontal"  class="wow bounceInUp" data-wow-duration ="1s" data-wow-delay ="0s">
                  <el-menu-item @click.native="Collapse">
                      <i :class="collapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
                  </el-menu-item>
                <el-menu-item @click.native="leftPage">
                  <i class = "el-icon-back"></i>
                </el-menu-item>
                <el-menu-item @click.native="rightPage">
                  <i class = "el-icon-right"></i>
                </el-menu-item>
              </el-menu>
          </el-col>
          <el-col  :span="1">
              <el-dropdown index="1" placement="bottom-start" :divided="true" @visible-change="avatarOpen^=1">
                  <el-button type="text" size="medium">
                   <el-avatar :src='this.currentUser.userAvatar'></el-avatar>
                    <i :class="avatarOpen?'el-icon-arrow-down':'el-icon-arrow-up'" :key="avatarOpen"></i>
                  </el-button>
                  <el-dropdown-menu>
                      <el-dropdown-item index="1-1">{{ currentUser.userName }}({{currentUser.userAccount}})</el-dropdown-item>
<!--                      <el-dropdown-item index="1-2">改变主题</el-dropdown-item>-->
                      <el-dropdown-item index="1-2" @click.native="layOut">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
          </el-col>
      </el-header>
      <el-main style="background-color: #f6f6f6"  >
        <manngger-main class="wow bounceInUp" data-wow-duration ="1s" data-wow-delay ="0s"></manngger-main>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
import ManggerLefter from "@/components/manggerLefter";
import MannggerMain from "@/components/mannggerMain";
import {SiteApi} from "@/core/request/api/SiteApi";

export default {
  name: "manggerCenter",
  components: {MannggerMain, ManggerLefter},
  data(){
    return{
      collapse:0,
      currentUser: {},
      avatarOpen:0,
    }
  },
    created() {
      this.currentUser=JSON.parse(sessionStorage.getItem('loginStatus'))
    },
  mounted() {
    new this.$wow.WOW().init()
    this.axios.get(SiteApi.getAttributeByCommon + 'siteLogo')
        .then(res => {
          if (!res.data.code) {
            this.currentUser.userAvatar = res.data.data
          }
        })
  },
  methods:{
    leftPage(){
      this.$router.go(-1)
    },
    rightPage(){
      this.$router.go(1)
    },
    Collapse(){
      this.collapse^=1
      // this.isCollapse^=1;
    },
      layOut(){
          this.$store.dispatch("setToken")
          sessionStorage.removeItem('loginStatus')
          this.$router.go(0)
      }
  },
  computed:{
    isCollapse(i){
     return i;
    },
  }
}
</script>

<style scoped>
#manggerCenter{
  height: 100vh;
}

.el-col-4{
    height: 100%;
}
/*.header_right{*/
/*    width: 100%;*/
/*    height: 44px;*/
/*    !*align-items: center;*!*/
/*    line-height: 44px;*/
/*}*/
.header_right{
margin-top: 10px;
}
</style>
